<template>
	<div id="mark_detail">
		<div class="mark_detail_content">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="招标详情" name="first">
					<div id="markinfo">
						<el-form label-width="100px" style="">
							<el-form-item label="求购标题：">
								<el-input v-model="modelData.title" type="text" maxlength="30" placeholder="请填写求购标题"></el-input>
							</el-form-item>
							<el-form-item label="招标方式：">
								<el-input v-model="modelData.wayCN" type="text" maxlength="30"></el-input>
							</el-form-item>
							<el-form-item label="产品：">
								<el-input v-model="modelData.matterTypeCN" type="text" placeholder=""></el-input>
							</el-form-item>
							<el-form-item label="状态：">
								<el-input v-model="modelData.statusCN" type="text" placeholder=""></el-input>
							</el-form-item>
							<el-form-item label="创建时间：">
								<el-input v-model="modelData.createDate" type="text" placeholder=""></el-input>
							</el-form-item>
							<el-form-item label="截止时间：">
								<el-input v-model="modelData.expirationDate" type="text" placeholder=""></el-input>
							</el-form-item>
							<el-form-item label="求购数量：">
								<div class="info_right_content my-flex-left" contenteditable="true">
									{{modelData.qty}}{{modelData.unitIdCN}}
								</div>
							</el-form-item>
							<el-form-item label="联系人：">
								<el-input v-model="modelData.contactName" type="text" maxlength="20" placeholder="请填写联系人姓名"></el-input>
							</el-form-item>
							<el-form-item label="联系电话：">
								<el-input v-model="modelData.contactTel" :maxlength="11" :minlength="11" placeholder="请填写联系电话"></el-input>
							</el-form-item>
							<el-form-item label="邮箱：">
								<el-input v-model="modelData.contactEmail" type="text" :maxlength="50" placeholder="请填写邮箱地址"></el-input>
							</el-form-item>

							<el-form-item label="收货地址：">
								<div class="info_right_content my-flex-left" contenteditable="true">
									{{modelData.addressPre}}{{modelData.addressDetail}}
								</div>
							</el-form-item>
							<el-form-item label="图片资料：">
								<div class="info_bottom_content my-flex-left">
									<img class="markimgitem" :src="item" v-for="(item,index) in imgsUrl" />
								</div>
							</el-form-item>
							<el-form-item label="详细描述：">
								<el-input type="textarea" v-model="modelData.remark"></el-input>
							</el-form-item>

						</el-form>
					</div>
				</el-tab-pane>
				<el-tab-pane label="招标价格" name="second" class="price_label">
					<div class="release_price">
						<div class="price_list">
							<div class="price" v-for="(item,index) in tableData">
								<div class="price_item">
									<div class="top_info">
										<div class="company my-flex-left">
											<img src="../../assets/centers/icon_store.png" />
											<span>{{item.shortName}}</span>
										</div>
									</div>
									<div class="mark_info my-flex-left">
										<div class="product_list">
											<div class="name_price my-flex-left" v-for="(subitem,index_) in item.list">
												<span class="unit">{{subitem.name}}</span>
												<span>{{subitem.priceCN}}</span>
											</div>

										</div>
										<div class="right_status my-flex-center">
											<template v-if="item.status=='pass_exe'">
												<span class="price_status " @click.stop="refuseMark(item.subjectMatterId,item.id)">拒绝</span>
												<span class="pricebtn receive my-flex-center" @click.stop="agreeMark(item,index)">中标</span>
											</template>
											<template v-else-if="item.status=='tender_accepted'">
												<span class="pricebtn refuse my-flex-center">已完成</span>
											</template>
											<template v-else>
												<span class="pricebtn refuse my-flex-center" @click="delMark(item.subjectMatterId,item.id,index)">删除</span>
											</template>

										</div>
									</div>
								</div>
							</div>
							<v-empty v-if="tableData.length==0"></v-empty>
						</div>
					</div>
				</el-tab-pane>
				<!--<el-button type="text" @click="refuseMark(1,1)">点击打开 Dialog</el-button>-->

				<el-dialog title="拒绝理由" :visible.sync="dialogVisible" width="40%" >
					<el-input v-model="refuseParam.remark" placeholder="请输入拒绝理由" maxlength='30'></el-input>

					<span slot="footer" class="dialog-footer">
					    <el-button @click="dialogVisible = false">取 消</el-button>
					    <el-button type="primary" @click="refuseApply">确 定</el-button>
					  </span>
				</el-dialog>
			</el-tabs>
		</div>

	</div>
</template>

<script>
	import service from '@/js/services/markservice.js';
	import orderservice from '@/js/services/orderservice.js';
	import addrservice from '@/js/services/addrservice.js';
	export default {
		data() {
			return {
				currrentId: 3,
				categoryData: [{
					id: '0',
					name: '详情'
				}, {
					id: '1',
					name: '报价'
				}],
				currentType: 0,
				modelData: {},
				tableData: [],
				id: '',
				status: '',
				imgsUrl: [],
				canceling: false,
				refuseParam: {
					subjectMatterId: null,
					traffickerId: null,
					remark: null,
					status: 'reject_exe'
				},
				searchCondition: {
					id: '',
					pageNum: 1,
					pageSize: 10
				},
				mescroll: '',
				prodIds: [],
				orderPreviewParam: {
					addressId: '',
					ids: ''
				},
				from: null, //上一个路由
				activeName: 'first',
				delparams: {
					subjectMatterId: null,
					traffickerId: null
				},
				dialogVisible: false

			}
		},
		computed: {

		},
		mounted() {
			this.id = this.$route.query.id;
			this.searchCondition.id = this.$route.query.id;
			this.status = this.$route.query.status;
			this.getMarkDetail(this.id);
			//			this.refuseMark(1, 1)
			//			this.currentType = sessionStorage.getItem('currentDetailMarkType') || 0;
		},
		methods: {
			...service,
			handleClick(tab, event) {
				let activeName = event.target.getAttribute('id').split('-')[1];
				console.log(activeName);
				if(activeName == 'second') {
					this.getProductPrice(this.id);

				}
			},
			delMark(subjectMatterId, id, index) {
				this.delparams = {
					subjectMatterId: subjectMatterId,
					traffickerId: id
				}
				this.$confirm('您确认要删除该标的吗？')
					.then(_ => {
						this.delmarks();
					})
					.catch(_ => {});

			},
			refuseMark(subjectMatterId, id) {
				this.dialogVisible = true;
				this.refuseParam = {
					subjectMatterId: null,
					traffickerId: null,
					remark: null,
					status: 'reject_exe'
				};
				this.refuseParam.subjectMatterId = subjectMatterId;
				this.refuseParam.traffickerId = id;
				
//				this.refuseParam = {
//					subjectMatterId: subjectMatterId,
//					traffickerId: id,
//					remark: value,
//					status: 'reject_exe'
//				};
//				this.$prompt('请输入拒绝理由', '提示', {
//					confirmButtonText: '确定',
//					cancelButtonText: '取消',
//					inputPattern: /^[a-zA-Z]{1,10}$/,
//					inputErrorMessage: '拒绝理由不能为空！'
//				}).then(({
//					value
//				}) => {
//
//					this.refuseParam = {
//						subjectMatterId: subjectMatterId,
//						traffickerId: id,
//						remark: value,
//						status: 'reject_exe'
//					};
//					this.refuseApply();
//
//				}).catch(() => {});
			},
			
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						this.refuseApply();
					})
					.catch(_ => {});
			},
			async refuseApply() { //拒绝中标
				if(!this.refuseParam.remark){
					this.$message('拒绝理由不能为空！');
					return;
				}				
				let res = await this.httptool.post(this.apis.refuseMark, this.refuseParam);
				this.$message('已拒绝中标');
				this.dialogVisible = false;
				this.getProductPrice(this.id);
			},
			async delmarks() { //删除标的
				let res = await this.httptool.post(this.apis.deleteMark, this.delparams);
				this.$message({
					type: 'success',
					message: '删除成功！'
				});
				this.getProductPrice(this.id);
			},
			async getDefaultAddress(callback) {
				let res = await this.httptool.post(this.apis.getDefaultAddress, {});
				if(!res.data) {
					this.$router.push('/addaddress?type=order');
				} else {
					callback(res.data);
				}

			},
			async agreeMark(item, index) {
				//				let self = this;
				let subjectMatterId = item.subjectMatterId;
				let traffickerId = item.id;
				//需要多个商品选择时调加入购车多个商品时用此方法

				let params = {};
				params.productId = item.list[0].id;
				params.qty = this.modelData.qty;
				params.buyNow = 1;
				let checkParam = {};
				checkParam.list = [];
				checkParam.list.push(params);
				let res3 = await this.httptool.post(this.apis.checkQty, checkParam);
				let res = await this.httptool.post(this.apis.shopcarAdd, params);
				let shopIds = res.data.id;
				let confirmParam = {
					ids: shopIds,
					subjectId: subjectMatterId,
					traffickerId: traffickerId,
					address: {
						name: this.modelData.contactName,
						id: -1,
						tel: this.modelData.contactTel,
						addressPre: this.modelData.addressPre,
						addressDetail: this.modelData.addressDetail,
						latitude: this.modelData.latitude,
						longitude: this.modelData.longitude,
						isNotAddress:true
					}
				};
				this.$store.commit('changeValue', {
					name: 'confrimorder',
					value: confirmParam
				});
				this.$router.push('/orderconfirm'); //立即购买跳转到确认订单页面

			},

			changeType(id) {
				this.currentType = id;
				if(this.currentType == 1) {

				}
				//				sessionStorage.setItem('currentDetailMarkType', this.currentType);
			},
			changeRouter(url) {
				this.$router.push({
					path: url
				});
			},
			goImgPre(index) {
				let scrollTop = document.body.scrollTop;
				this.$store.commit('changeValue', {
					name: 'savedPosition',
					value: scrollTop
				})
				this.$store.commit('changeValue', {
					name: 'imgPre_index',
					value: index
				})

				let arr = this.modelData.imgs.split(',');
				this.$store.commit('changeValue', {
					name: 'imgPre_imgs',
					value: arr
				})
				this.$router.push('/imgPre');
			}
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				vm.from = from.path;
			})
		}
	}
</script>

<style lang="less" src="../../less/page/mark/markdetail.less"></style>